<template>
  <div class="main-container">
    <div class="carousel">
      <el-carousel >
        <el-carousel-item>
          <h1>可视回测 回测更清晰</h1>
          <h2>可视分析</h2>
        </el-carousel-item>
        <el-carousel-item>
          <h1>交互复盘 投资更懂你</h1>
          <h2>人机交互</h2>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="search">
      <el-input placeholder="请输入内容" v-model="searchText" class="input-with-dataPicker" id="rawInput">
        <!-- <el-date-picker slot="prepend" type="date" placeholder="选择日期">
        </el-date-picker> -->
        <el-date-picker
        slot="prepend"
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
        <el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
      </el-input>
    </div>
    <div class="main-tab">
      <el-tabs tab-position="left" :stretch="true" @tab-click="handleClick">
        <el-tab-pane label="风格">
          <TabContent tabName="风格" :dataList="dataList" v-on:sigSetSearchTxt1="setSearchTxt1" v-on:sigSetSearchTxt2="setSearchTxt2"/>
        </el-tab-pane>
        <el-tab-pane label="主题">
          <TabContent tabName="主题" :dataList="dataList" v-on:sigSetSearchTxt1="setSearchTxt1"/>
        </el-tab-pane>
        <el-tab-pane label="策略">
          <TabContent tabName="策略" :dataList="dataList" v-on:sigSetSearchTxt1="setSearchTxt1"/>
        </el-tab-pane>
        <el-tab-pane label="条件">
          <ConditionContent tabName="条件" ref="conditionData"/>
        </el-tab-pane>  
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TabContent from './tabContent'
import ConditionContent from './conditionContent'
import { fetchTabList, searchResult } from '@/api/first'
import router from '@/router'

export default {
  name: 'First',
  components: {TabContent,ConditionContent},
  data() {
    return {
      dataList: [],
      value1:'',
      searchText: '',
      leftText: '',
      rightText: ''
    }
  },
  methods: {
      handleClick(tab, event) {
        this.dataList = [];
        console.log(888888,tab.label);
        fetchTabList(tab.label).then( resp => {
          //resp.status 
          this.dataList = resp.data;
          //console.log(88889,resp);
        })
        //console.log(8888,tab.label,tab.name, event);
      },

      // 设置搜索框文本
      setSearchTxt1(txt) {
        this.leftText = txt;
        this.searchText = txt;
      },

      setSearchTxt2(txt) {
        this.rightText = txt;
        this.searchText = this.leftText + " | " + this.rightText;
      },

      doSearch() {
        // console.log(9999, this.value1);
        let dataParam = {
          text: this.searchText,
          pageIndex: 0,
          pageSize:4,
          date: this.value1
        };
        console.log(dataParam);
        let stockDuration = this.$refs["conditionData"].stockDuration;
        let cashAmount = this.$refs["conditionData"].cashAmount;
        router.push("/second");

        searchResult(dataParam).then( resp => {
          console.log(resp);
          // router.push
        })
        
        //window.alert(cashAmount + stockDuration);

        this.setSearchTxt(stockDuration);
        //this.searchText = stockDuration;
      }
    },
  computed: {

  },
  created() {

  },
  mounted(){
    fetchTabList("风格").then( resp => {
          this.dataList = resp.data;
          //console.log(88889,resp);
        })
  }
}
</script>

<style lang="scss" scoped>
.main-container {
  background: #F5F5F5;
  height: 100vh;
  .carousel {

    ::v-deep .el-carousel__container {
      background: #E4EBF8;
    }

    ::v-deep .el-carousel__item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    ::v-deep .el-carousel__item h1 {
      color: white;
      font-size: 48px;
    }

    ::v-deep .el-carousel__item h2 {
      color: white;
      font-size: 24px;
      margin-top: -10px;
    }

  }

  .search {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    height: 60px;
    z-index: 10;
    margin-top: -30px;


    .input-with-dataPicker {
      width: 70%;

    }

    ::v-deep .el-input-group{
      > .el-input__inner{
        height: 60px;
      }
    }

  }
  .main-tab{
    padding: 30px 50px;
    height: 60%;

    ::v-deep .el-tabs--left{
      height: 100%;
    }

    ::v-deep .el-tabs__header.is-left{
      background: #E9E9E9;
    }

    ::v-deep .el-tabs__content{
      height: 100%;
    }

    ::v-deep .el-tab-pane{
      height: 100%;
    }

  }

}
</style>

